<template>
  <div class="sTable" ref="_sTable">
    <el-table
      ref="sTable"
      v-loading="loading"
      element-loading-text="加载中"
      element-loading-spinner="el-icon-loading"
      element-loading-background="#06214C"
      :data="data"
      :stripe="stripe"
      :max-height="maxHeight"
      :header-cell-style="tableConfig.headerCellStyle"
      :cell-style="tableConfig.cellStyle"
      :style="{
          '--stripeBGC': tableConfig.stripeBGC
        }"
      @row-click="rowClick">
      <template v-for="(item, index) in columns">
        <template v-if="item.type">
          <el-table-column
            :key="index"
            :type="item.type"
            :index="item.index"
            :label="item.label"
            :align="item.align"
            :width="item.width"
            :min-width="item.minWidth"
            :fixed="item.fixed"
            :reserve-selection="item.reserveSelection">
          </el-table-column>
        </template>
        <template v-else>
          <template v-if="item.formatter">
            <el-table-column
              :key="index"
              :label="item.label"
              :prop="item.prop"
              :width="item.width"
              :min-width="item.minWidth"
              :align="item.align"
              :show-overflow-tooltip="item.showOverflowTooltip"
              :formatter="item.formatter"/>
          </template>
          <template v-else>
            <el-table-column
              :key="index"
              :label="item.label"
              :prop="item.prop"
              :width="item.width"
              :min-width="item.minWidth"
              :align="item.align"
              :show-overflow-tooltip="item.showOverflowTooltip">
              <template slot-scope="scope">
                <slot
                  :scope="scope"
                  :row="scope.row"
                  v-if="item.slot"
                  :name="item.slot"
                  :data="scope.row[item.slot]"
                />
                <div v-else-if="item.progress">
                  <el-progress :percentage="Number(scope.row[item.prop])" :color="item.pColor"></el-progress>
                </div>
                <span v-else>{{ scope.row[item.prop] }}</span>
              </template>
            </el-table-column>
          </template>
        </template>
      </template>
    </el-table>
    <div class="paginationWrap">
      <el-pagination
        :background="pageBackground"
        :current-page.sync="currentPage"
        :page-size.sync="pageSize"
        :layout="paginationConfig.layout"
        :page-sizes="paginationConfig.pageSizes"
        :pager-count="paginationConfig.pagerCount"
        :total="paginationConfig.total"
        v-bind="$attrs"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script>
  import { scrollTo } from '@/utils/scroll-to'
  export default {
    name: 'sTable',
    components: {},
    props: {
      loading: {
        type: Boolean,
        default: false
      },
      stripe: {
        type: Boolean,
        default: true
      }, // 是否为斑马纹 table
      headerCellStyle: {
        type: Object,
        default: () => {
          return {}
        }
      },
      cellStyle: {
        type: Object,
        default: () => {
          return {}
        }
      },
      config: {
        type: Object,
        default: () => {
          return {}
        }
      },
      columns: {
        type: Array,
        required: true,
        validator: (cols) => {
          return cols.length >= 1 //表格至少需要1列
        }
      },
      data: {
        type: Array,
        default: () => {
          return []
        }
      },
      page: {
        type: Object,
        default: () => {
          return {}
        }
      },
      pageBackground: {
        type: Boolean,
        default: true
      },
      autoScroll: {
        type: Boolean,
        default: true
      },
    },
    data() {
      return {
        maxHeight: null
      }
    },
    computed: {
      tableConfig() {
        const { headerCellStyle, cellStyle, config } = this
        return {
          headerCellStyle: {
            ...headerCellStyle,
            color: headerCellStyle.color || '#01E6FE',
            fontSize: headerCellStyle.fontSize || '16px',
            fontFamily: headerCellStyle.fontFamily || 'PingFangSC',
            height: headerCellStyle.height || '60px',
            backgroundColor: headerCellStyle.backgroundColor || 'transparent',
          }, // 表头行的 style
          cellStyle: {
            ...cellStyle,
            color: cellStyle.color || '#fff',
            fontSize: cellStyle.fontSize || '16px',
            fontFamily: cellStyle.fontFamily || 'PingFangSC',
            height: cellStyle.height || '60px',
            backgroundColor: headerCellStyle.backgroundColor || 'rgba(117, 160, 255, 0.1)',
          },
          stripeBGC: config.stripeBGC || 'transparent', // 斑马纹颜色
        }
      },
      currentPage: {
        get() {
          return this.paginationConfig.page
        },
        set(val) {
          this.$emit('update:page', val)
        }
      },
      pageSize: {
        get() {
          return this.paginationConfig.limit
        },
        set(val) {
          this.$emit('update:limit', val)
        }
      },
      paginationConfig() {
        const { page } = this
        return {
          layout: page.layout || 'prev, pager, next, jumper',
          pageSizes: page.pageSizes || [10, 20, 30, 50],
          // 移动端页码按钮的数量端默认值5
          pagerCount:  page.pagerCount || document.body.clientWidth < 992 ? 5 : 7,
          total: page.total || 0,
          page: page.page || 1,
          limit: page.limit || 10
        }
      }
    },
    mounted() {
      this.maxHeight = this.$refs._sTable.offsetHeight - parseInt(this.tableConfig.headerCellStyle.height)
    },
    methods: {
      // 当某一行被点击时会触发该事件
      rowClick(row, column, event){
        this.$emit('row-click', row, column, event)
      },
      handleSizeChange(val) {
        this.$emit('pagination', { page: this.currentPage, limit: val })
        if (this.autoScroll) {
          scrollTo(0, 800)
        }
      },
      handleCurrentChange(val) {
        this.$emit('pagination', { page: val, limit: this.pageSize })
        if (this.autoScroll) {
          scrollTo(0, 800)
        }
      }
    }
  }
</script>

<style scoped lang="scss">
  .sTable {
    height: 100%;
    position: relative; padding-bottom: 60px;
    ::v-deep .el-table {
      background-color: transparent;

      &.el-table--scrollable-y {
        .el-table__body-wrapper {
          /*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
          &::-webkit-scrollbar {
            width: 4px; height: 4px; background-color: transparent;
          }
          /*定义滚动条轨道 内阴影+圆角*/
          &::-webkit-scrollbar-track {
            box-shadow: inset 0 0 6px rgba(0, 0, 0, 0);
            border-radius: 10px;
            background-color: #002954;
          }
          /*定义滑块 内阴影+圆角*/
          &::-webkit-scrollbar-thumb {
            border-radius: 10px;
            box-shadow: inset 0 0 6px rgba(0, 0, 0, 0);
            background-color: rgba(1,230,254,0.3);
          }
        }
      }

      &::before {
        display: none
      }

      th {
        border-bottom: 0;
        font-weight: normal;
        &.el-table__cell {
          background-color: transparent;
        }
        .el-checkbox__inner {
          border: 1px solid #49BBEB!important;
          background: #042047!important;
          &::before { background-color: #49BBEB }
        }
      }

      tr {
        background-color: transparent;
        .el-checkbox__inner {
          border: 1px solid #49BBEB!important;
          background: #042047!important;
          &::after { border-color: #49BBEB }
        }
      }

      td { border-bottom: 0; }

      &.el-table--striped .el-table__body tr.el-table__row--striped td.el-table__cell {
        background-color: var(--stripeBGC)!important;
      }
      .el-progress__text { color: #fff;}
    }
    .paginationWrap {
      display: flex; justify-content: flex-end;
      padding-top: 25px; position: absolute; bottom: 0; width: 100%;
      ::v-deep .is-background {
        .btn-prev, .btn-next {
          width: 31px; height: 31px;
          background: #002954; border-radius: 6px; border: 1px solid rgba(1,230,254,0.3);
          i { color: #49BBEB;}
        }
        li.number, li.more {
          width: 31px; height: 31px; color: #49BBEB;
          background: #002954; border-radius: 6px; border: 1px solid rgba(1,230,254,0.3);
        }
        li.active {
          background: #01E6FE; color: #081524;
        }
        .el-pagination__jump {
          color: #fff;
          .el-input {
            margin-left: 5px; margin-right: 5px;
          }
          .el-input__inner {
            height: 31px; color: #49BBEB;
            background: #002954; border-radius: 6px; border: 1px solid rgba(1,230,254,0.3);
          }
        }
      }
    }
  }
</style>
